<template>
  <div class="index_container">
    <!-- 头部+搜索框 -->
    <Header></Header>

    <!-- 轮播图 -->
    <van-swipe
      :loop="true"
      :width="300"
      class="swiper"
      touchable
      autoplay="3000"
    >
      <van-swipe-item>
        <img
          src="http://fdfs.xmcdn.com/storages/f478-audiofreehighqps/26/8D/GMCoOR4IX0qaAAIJ4QIpiYz6.jpg"
        />
      </van-swipe-item>

      <van-swipe-item>
        <img
          src="http://fdfs.xmcdn.com/storages/f478-audiofreehighqps/26/8D/GMCoOR4IX0qaAAIJ4QIpiYz6.jpg"
        />
      </van-swipe-item>

      <van-swipe-item>
        <img
          src="http://fdfs.xmcdn.com/storages/f478-audiofreehighqps/26/8D/GMCoOR4IX0qaAAIJ4QIpiYz6.jpg"
        />
      </van-swipe-item>

      <van-swipe-item>
        <img
          src="http://fdfs.xmcdn.com/storages/f478-audiofreehighqps/26/8D/GMCoOR4IX0qaAAIJ4QIpiYz6.jpg"
        />
      </van-swipe-item>

      <van-swipe-item>
        <img
          src="http://fdfs.xmcdn.com/storages/f478-audiofreehighqps/26/8D/GMCoOR4IX0qaAAIJ4QIpiYz6.jpg"
        />
      </van-swipe-item>
    </van-swipe>

    <!-- 三个导航 -->
    <view class="nav">
      <view
        class="nav_item"
        v-for="(item, index) in navList"
        :key="item.name"
        @click="pushToHandler(index as number)"
      >
        <img :src="item.img" />
        <view class="text">{{ item.name }}</view>
      </view>
    </view>

    <!-- 喜马拉雅广告图 -->
    <router-link to="/download">
      <img
        src="//imagev2.xmcdn.com/group61/M0A/CD/B2/wKgMZl0W1legiUgkAACPrBBFcJ4381.png"
        class="bannerImg"
      />
    </router-link>

    <!-- 新人必听 -->
    <div class="index_container">
      <div class="title">新人必听</div>
      <div class="container">
        <listen_card
          v-for="item in listenList"
          :key="item.albumId"
          :listen="item"
          @click="toDetailHandler(item.albumId)"
        >
          >
        </listen_card>
      </div>
    </div>

    <!-- 限时免费 -->
    <div class="free">
      <div class="title">限时免费</div>
      <van-swipe
        :loop="false"
        :width="110"
        class="swiper1"
        touchable
        :show-indicators="false"
      >
        <van-swipe-item v-for="item in freeList" :key="item.id" >
          <listen_card :listen="item" @click="toDetailHandler(item.id)"></listen_card>
        </van-swipe-item>
      </van-swipe>
    </div>

    <!-- 今日热点 -->
    <div class="hotspot">
      <div class="title">今日热点</div>
      <div class="hotspot_content">
        <hotspot_card
          v-for="item in hotspotList"
          :key="item.id"
          :hotspot="item"
          @click="toDetailHandler(item.albumId)"
        ></hotspot_card>
      </div>
    </div>

    <!-- 博客推荐 -->
    <div class="hotspot">
      <div class="title">博客推荐</div>
      <div class="hotspot_content">
        <boke_card
          v-for="item in hotspotList"
          :key="item.id"
          :hotspot="item"
        ></boke_card>
      </div>
    </div>

    <!-- 底部 -->
    <div class="footer">
      <img
        class="image"
        src="https://imagev2.xmcdn.com/storages/2165-audiofreehighqps/52/6D/GKwRIDoF6Ml9AAESnAEaI6xF.png"
      />
      <img
        src="https://imagev2.xmcdn.com/storages/72b6-audiofreehighqps/30/CE/GMCoOR8H3gffAAAQWAIAHhDF.png"
        class="image1"
      />
      <div class="text">@ 2014-2024 喜马拉雅 版权所有</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import Header from '@/components/header/index.vue'
import hotspot_card from '@/pages/home/hotspot_card/index.vue'
import listen_card from '@/pages/home/listen_card/index.vue'
import boke_card from '@/pages/home/boke_card/index.vue'

import { onMounted, ref } from 'vue'
import {
  reqNavList,
  reqSwiperList,
  reqListenList,
  reqFreeHotspotList,
} from '@/api/home/index'
import { AnyObject } from '@/api/home/interface'
import router from '@/router'

const swiperList = ref<AnyObject>([])
const navList = ref<AnyObject>([])
const listenList = ref<AnyObject>([])
const freeList = ref<AnyObject>([])
const hotspotList = ref<AnyObject>([])

// 组件挂载
onMounted(() => {
  getNavList(), getSwiperList(), getListenList(), getFreeHotspotList()
})

// 轮播图功能函数
async function getSwiperList() {
  try {
    let res = await reqSwiperList()
    swiperList.value = res.data
  } catch (error) {
    console.log(error)
  }
}

// 三个导航按钮功能函数
async function getNavList() {
  try {
    let res = await reqNavList()
    navList.value = res.data.moduleContent.tomatoes
  } catch (error) {
    console.log(error)
  }
}

// 新人必听的功能函数
async function getListenList() {
  try {
    const res = await reqListenList(1, 10)
    if (res.ret === 200) {
      listenList.value = res.data.albums.splice(0, 6)
    }
  } catch (error) {
    console.log(error)
  }
}

// 限时免费和今日热点的功能函数
async function getFreeHotspotList() {
  try {
    let res = await reqFreeHotspotList()
    if (res.code == 0) {
      ;(freeList.value = res.data.limitedFreeAlbum.limitedTimeFreeAlbums),
        (hotspotList.value = res.data.hotTrack.hotTracks)
    }
  } catch (error) {
    console.log(error)
  }
}

// 三个导航按钮点击跳转
function pushToHandler(idx: number) {
  if (idx == 0) {
    router.push('./ranking')
  } else if (idx == 1) {
    router.push('/category')
  } else {
    router.push('/listening')
  }
}

// 新人必听的跳转详情
function toDetailHandler(albumId:string){
  router.push(`/detail?categoryid=${albumId}`)
}
</script>

<style scoped lang="less">
.index_container {
  .swiper {
    margin-top: 10px;
    img {
      width: 292px;
      height: 120px;
      margin-left: 40px;
      border-radius: 10px;
    }
  }
  .nav {
    display: flex;
    justify-content: space-around;
    padding: 24px;
    .nav_item {
      display: flex;
      flex-direction: column;
      align-items: center;
      img {
        width: 34px;
        height: 34px;
      }
      .text {
        font-size: 12px;
        margin-top: 5px;
      }
    }
  }
  .bannerImg {
    height: 81px;
    width: 100%;
  }
  .container {
    display: flex;
    flex-wrap: wrap;
  }

  .title {
    font-size: 18px;
    margin: 17px 0px 17px 15px;
    font-weight: bold;
  }

  .free {
    .title {
      font-size: 18px;
      margin: 17px 0px 17px 15px;
      font-weight: bold;
    }
    .swiper1 {
      margin-right: 10px;
    }
  }
  .hotspot {
    .title {
      font-size: 18px;
      margin: 17px 0px 17px 15px;
      font-weight: bold;
    }
    .hotspot_content {
      padding: 10px;
    }
  }
  .footer {
    position: relative;
    margin-top: 10px;
    .image {
      position: absolute;
      height: 180px;
      width: 100%;
    }
    .image1 {
      position: absolute;
      width: 102px;
      height: 36px;
      top: 40px;
      left: 140px;
    }
    .text {
      position: absolute;
      font-size: 12px;
      color: #9f9e9d;
      top: 90px;
      left: 100px;
    }
  }
}
</style>
